<template>
    <div class="calendar">
        <div class="calendar-header">
            <button @click="previousMonth">Previous</button>
            <span>{{ monthNames[month] }} {{ year }}</span>
            <button @click="nextMonth">Next</button>
        </div>
        <div class="calendar-grid">
            <div v-for="(day, index) in daysInMonth" :key="index" class="calendar-day">
                <div>{{ day }}</div>
                <input
                    v-model="prices[day]"
                    type="number"
                    placeholder="Enter Price"
                    :aria-label="'Price for ' + day
        />
      </div>
    </div>
  </div>
</template>

<script>
                import { defineComponent, ref, computed, onMounted } from 'vue';

                export default defineComponent({
                name: 'Calendar',
                setup() {
                const currentDate = new Date();
                const month = ref(currentDate.getMonth());
                const year = ref(currentDate.getFullYear());
                const prices = ref<{ [key: string]: number }>({});

                // Month names array
                const monthNames = [
                'January', 'February', 'March', 'April', 'May', 'June',
                'July', 'August', 'September', 'October', 'November', 'December'
                ];

                // Calculate number of days in the current month
                const daysInMonth = computed(() => {
                const firstDay = new Date(year.value, month.value, 1);
                const lastDay = new Date(year.value, month.value + 1, 0);
                const days = [];

                for (let i = 1; i <= lastDay.getDate(); i++) {
                days.push(i);
                }

                return days;
                });

                // Move to previous month
                const previousMonth = () => {
                if (month.value === 0) {
                month.value = 11;
                year.value--;
                } else {
                month.value--;
                }
                };

                // Move to next month
                const nextMonth = () => {
                if (month.value === 11) {
                month.value = 0;
                year.value++;
                } else {
                month.value++;
                }
                };

                onMounted(() => {
                // Initialize any necessary setup, like fetching saved prices
                });

                return {
                month, year, prices, monthNames, daysInMonth, previousMonth, nextMonth
                };
                }
                });
                </script>

                <style scoped>
                    .calendar {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    .calendar-header {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        margin-bottom: 20px;
                    }

                    .calendar-grid {
                        display: grid;
                        grid-template-columns: repeat(7, 1fr);
                        gap: 10px;
                        width: 100%;
                        max-width: 500px;
                    }

                    .calendar-day {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    input {
                        margin-top: 5px;
                        padding: 5px;
                        width: 80%;
                        text-align: center;
                    }

                    button {
                        padding: 10px;
                        font-size: 16px;
                    }
                </style>
